<template>
  <div class="body">
    <div class="box1">定位城市</div>
    <div class="b1">
      <div class="box2">定位失败,请稍后重试</div>
    </div>
    <div class="box1">最近访问城市</div>
    <div class="b1">
      <!-- <div class="box2-1">深圳</div> -->
      <div v-for="(item, index) in nowcity" :key="index" class="box2-1">
        {{ item }}
      </div>
    </div>
    <div class="box1">热门城市</div>
    <div class="remeng2">
      <ul>
        <li>上海</li>
        <li>成都</li>
        <li>西安</li>
        <li>深圳</li>
        <li>北京</li>
        <li>武汉</li>
        <li>南京</li>
        <li>重庆</li>
        <li>广州</li>
        <li>天津</li>
        <li>杭州</li>
      </ul>
    </div>

    <van-index-bar :index-list="indexList" class="nav">
      <template v-for="(item, index) in citylist">
        <van-index-anchor :key="index" :index="item.initial" />

        <van-cell
          class="nav2"
          v-for="(i, ind) in item.list"
          :key="index + '-' + ind"
          :title="i.name"
          @click="goHome(i.name)"
        />
      </template>
    </van-index-bar>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "CityList",
  data() {
    return {
      nowcity: [],
      citylist: [],
      indexList: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        "N",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "W",
        "X",
        "Y",
        "Z",
      ],
    };
  },
  mounted() {
    //获取缓存中的城市信息
    this.nowcity = JSON.parse(localStorage.getItem("nearcity"));
    console.log(this.nowcity);
    axios.get("./json/city.json").then((res) => {
      console.log(res);
      this.citylist = res.data.city;
    });
  },
  methods: {
    goHome(name) {
      console.log(name);
      //缓存信息追加操作
      //1.先将缓存信息取出，将 json字符串转json数组
      var data = JSON.parse(localStorage.getItem("nearcity")) || [];
      console.log(typeof data);
      //在缓存的列表中是否存在该城市
      if (data.indexOf(name) == -1) {
        //2.将新的信息追加进去
        data.push(name);
      }

      //将 数组转字符串之后，再保存 缓存
      localStorage.setItem("nearcity", JSON.stringify(data));
      //跳转到首页
      this.$router.push("/");
    },
  },
};
</script>

<style lang="less" scoped>
.body {
  background: #f5f5f5;
  width: 100%;
  height: 100vh;
}
.nav {
  background-color: #eee;
}
.nav2 {
  background-color: #f5f5f5;
}
.box1 {
  background-color: #eee;
  width: 100%;
  height: 0.8rem;
  color: #333;
  font-size: 14px;
  padding-left: 0.3rem;
  line-height: 0.8rem;
}
.b1 {
  background-color: #f5f5f5;
  width: 100%;
  height: 1.3333rem;
  display: flex;
  text-align: center;
  align-items: center;
  color: #333;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .box2 {
    width: 4.8533rem;
    height: 0.88rem;
    background-color: #fff;
    border: 0.02rem solid #e6e6e6;
    line-height: 0.8rem;
    margin-left: 0.4rem;
    font-size: 15px;
  }
  .box2-1 {
    width: 2.6667rem;
    height: 0.88rem;
    background-color: #fff;
    border: 0.02rem solid #e6e6e6;
    line-height: 0.8rem;
    margin-left: 0.4rem;
    font-size: 15px;
  }
}
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 4.5333rem;
  text-align: center;
  li {
    width: 2.6667rem;
    height: 0.88rem;
    background-color: #fff;
    border: 0.02rem solid #e6e6e6;
    line-height: 0.8rem;
    margin-left: 0.4rem;
    font-size: 15px;
    margin-bottom: 0.1333rem;
  }
}
</style>